<template>
  <page-card :title="menuName">
    <div class="public-list">
      <div class="public-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(item, index) => index"
                 @change="handleTableChange"
                 :pagination="pagination">
          <span slot="action"
                slot-scope="text, item">
            <template>
              <a @click="handleDetail(item)">查看</a>
            </template>
          </span>
        </a-table>
      </div>
    </div>

    <a-modal v-model="modal.visible"
             :title="modal.title"
             width="70%"
             ok-text="确定"
             cancel-text="取消"
             :centered="true"
             :footer="null">
      <div class="border">
        <a-form :form="form"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 12 }">
          <a-form-item label="用户名">
            <a-input v-model="logData.username"
                     disabled />
          </a-form-item>
          <a-form-item label="机构ID">
            <a-input v-model="logData.unitId"
                     disabled />
          </a-form-item>
          <a-form-item label="IP地址">
            <a-input v-model="logData.clientIp"
                     disabled />
          </a-form-item>
          <a-form-item label="浏览器">
            <a-textarea v-model="logData.browserText"
                        :rows="3"
                        disabled />
          </a-form-item>
          <a-form-item label="方法">
            <a-textarea v-model="logData.method"
                        :rows="3"
                        disabled />
          </a-form-item>
          <a-form-item label="接口">
            <a-input v-model="logData.request"
                     disabled />
          </a-form-item>
          <a-form-item label="请求方式">
            <a-input v-model="logData.httpMethod"
                     disabled />
          </a-form-item>
          <a-form-item label="时间">
            <a-input v-model="logData.timeText"
                     disabled />
          </a-form-item>
          <a-form-item label="持续时间">
            <a-input v-model="logData.time"
                     disabled />
          </a-form-item>
          <a-form-item label="参数">
            <a-textarea v-model="logData.params"
                        :rows="5"
                        disabled />
          </a-form-item>
          <a-form-item label="返回值">
            <a-textarea v-model="logData.result"
                        :rows="5"
                        disabled />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </page-card>
</template>

<script>
import { getLogPage } from '../../api/log'
import moment from 'moment'
export default {
  data () {
    return {
      pagination: {
        current: 1,
        total: 0,
        // 默认每页显示10条数据
        pageSize: 10,
        showSizeChanger: true,
        // 修改每页显示条数
        pageSizeOptions: ['10', '20', '50', '100'],
        // 总数据数量
        showTotal: (total) => `共 ${total} 条数据`
      },
      optTypeList: [{ value: 1, lable: '查询' }, { value: 2, lable: '新增' }, { value: 3, lable: '修改' }, { value: 4, lable: '删除' }, { value: 5, lable: '流转' }, { value: 6, lable: '授权' }, { value: 7, lable: '导出' }, { value: 8, lable: '导入' }, { value: 9, lable: '生成代码' }, { value: 10, lable: '清空' }, { value: 11, lable: '登录' }, { value: 12, lable: '退出' }, { value: 13, lable: '强退' }, { value: 14, lable: '下载' }, { value: 0, lable: '其他' }],
      dataList: [],
      columns: [{
        title: '用户名',
        width: 150,
        align: 'center',
        dataIndex: 'username',
        ellipsis: true
      }, {
        title: '操作类型',
        align: 'center',
        dataIndex: 'optType',
        ellipsis: true,
        customRender: (text, row, index) => {
          return this.getOptType(text)
        }
      }, {
        title: '时间',
        align: 'center',
        dataIndex: 'timestamp',
        ellipsis: true,
        customRender: (text, row, index) => {
          return moment(text).format('YYYY-MM-DD HH:mm:ss')
        }
      }, {
        title: 'IP地址',
        align: 'center',
        dataIndex: 'clientIp',
        ellipsis: true
      }, {
        title: '浏览器',
        align: 'center',
        dataIndex: 'browserText',
        ellipsis: true
      }, {
        title: '操作',
        width: 80,
        align: 'center',
        scopedSlots: { customRender: 'action' }
      }],
      modal: {
        visible: false,
        title: '日志信息'
      },
      logData: {},
      form: this.$form.createForm(this)
    }
  },
  computed:{
    // 菜单名字
    menuName(){
      return this.$route.meta.title || this.$route.name
    }
  },
  created () {
    if (!this.$route.meta.keepAlive) {
      this.getList()
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    getOptType (val) {
      return this.optTypeList.filter(item => item.value == val)[0].lable
    },
    // 列表数据
    getList () {
      let par = {
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      getLogPage(par).then(res => {
        if (res.list.length > 0) {
          res.list.map(item => {
            let brow = item.browser + '/' + '(' + item.os + ')' + item.type
            this.$set(item, 'browserText', brow)
          })
        }
        this.dataList = res.list || []
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
      })
    },
    // 查看
    handleDetail (item) {
      let brow = item.browser + '/' + item.browserVersion + '(' + item.os + ')' + item.type
      item.browserText = brow
      item.timeText = moment(item.timestamp).format('YYYY-MM-DD HH:mm:ss')
      this.logData = item
      this.modal.visible = true
    },
    // 分页、排序、筛选变化时触发
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-input[disabled] {
  color: rgba(0, 0, 0, 0.65);
}
::v-deep .ant-modal-body {
  height: 600px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 6px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e3e3e6;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: transparent;
    border-radius: 5px;
  }
}
</style>